<template>
  <div class="screen-container">
    <header class="screen-header">
      <div>
        <img src="../assets/img/top.png" alt="" />
      </div>
      <!-- <span class="logo">
        <img src="../assets/img/logo1.png" alt="" />
      </span> -->
      <span class="title">{{ title }}</span>
      <div class="title-right">
        <span class="datetime">{{ now }}</span>
      </div>
    </header>
    <div class="img-btn">
      <img src="../assets/img/back.png" alt="返回" title="返回" @click="go">
      <img src="../assets/img/full1.png" alt="全屏" title="全屏" @click="fullscreen">
      <img src="../assets/img/suoxiao.png" alt="退出全屏" title="退出全屏" @click="exit">
    </div>
  </div>
</template>

<script>
import moment from "moment";

export default {
  props: {
    title: {
      type: String,
      default: "标题",
    },
  },

  data() {
    return {
      timer: null,
      // now: moment().format("YYYY-MM-DD HH:mm:ss"),
      now:"2022-03-18 10:23:12",
    };
  },
  mounted() {
    // this.timer = setInterval(() => {
    //   this.now = moment().format("YYYY-MM-DD HH:mm:ss");
    // }, 1 * 1000);
  },
  beforeUnmount() {
    // if (this.timer) {
    //   window.clearInterval(this.timer);
    //   this.timer = null;
    // }
  },
  methods: {
    //返回
    go() {
      window.history.go(-1);
    },
    //全品
    fullscreen() {
      var element = document.documentElement;
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.msRequestFullscreen) {
        // 兼容ie11，11以下不支持
        element.msRequestFullscreen();
      } else if (element.mozRequestFullScreen) {
        // 兼容火狐
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        // 兼容webkit内核浏览器，如chrome和safari
        element.webkitRequestFullscreen();
      }
      // if (docElm.webkitRequestFullScreen) {
      //   docElm.webkitRequestFullScreen();
      // }
    },
    //退出全屏
    exit() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.screen-container {
  width: 100%;
  height: 100px;
  // padding: 0 20px;
  // background: url("../assets/img/bj.jpg") no-repeat;
  // background: url("../assets/img/first.png") no-repeat;
  // background-size: 100% 100%;
  // color: #fff;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  // overflow: hidden;
}
.screen-header {
  width: 100%;
  height: 100px;
  font-size: 20px;
  position: relative;
  > div {
    height: inherit;
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    box-sizing: border-box;
    img {
      width: 100%;
    }
  }
  .title {
    position: absolute;
    left: 50.6%;
    top: 44%;
    font-size: 33px;
    transform: translate(-50%, -50%);
  }
  .title-right {
    display: flex;
    align-items: center;
    position: absolute;
    right: 76px;
    top: 72%;
    transform: translateY(-80%);
  }
  .qiehuan {
    width: 28px;
    height: 21px;
    cursor: pointer;
  }
  .datetime {
    font-size: 17px;
    color: #00b9f6;
  }
  .logo {
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-80%);
    img {
      height: 35px;
      width: 128px;
    }
  }
}

.img-btn {
  position: absolute;
  right: 1.2%;
  top: 6.2%;
  img {
    width: 3vh;
    height: 3vh;
    margin-left: 0.5vw;
    cursor: pointer;
  }
}
</style>

 